<!DOCTYPE html>
<html>
<head>
    <title>Demo-Lottery</title>
    <link type="text/css" href="css/main.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
</head>
<body>
<div id="j-marquee-container"></div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/marquee.js"></script>
<script>
    // 后台获取的奖品信息
    var prizes = [{
        text: '图1',
        img: 'http://mm.bst.126.net/images/loading2.gif',
        href: 'http://www.kaola.com'
    }, {text: '图2'}, {text: '图3'}, {text: '图4'}, {text: '图5'}, {text: '图6'}, {text: '图7'}, {text: '图8'}, {text: '图9'}, {text: '图10'}, {text: '图11'}, {text: '图12'}];
    // 跑马灯初始化
    var marquee = new Marquee({
        row: 4,            // 行数
        column: 4,         // 列数
        margin: 5,         // 间隙
        width: 488,        // 容器宽度
        height: 320,       // 容器高度
        speed: 4,          // 抽奖转动速度(默认为5) 越大越慢
        prizes: prizes     // 标记奖项显示信息(可配置 href text img)
    }).$inject('#j-marquee-container');
    // 设置开始按钮
    var btn = marquee.btn;
    btn.innerHTML = '开始抽奖';
    $(btn).click(function () {
        // 根据后台请求返回 设置抽奖动效
        $(btn).addClass('disabled');
        btn.innerHTML = '抽奖中。。。';
        // 起始位置 继续抽奖 可从上次抽奖结束位置开始
        var index = marquee.lastIndex || 1;
        marquee.$play({
            index: index,  // 起始位置
            endCycle: 4,   // 转动圈数
            quick: 4,      // 开始转动后 转动第quick个开始加速(默认和设置为0时不加速)
            slow: 4,       // 停止转动前 转动到第slow个开始减速(默认值为3)
            EndIndex: 4    // 停住的位置
        });

    });
    marquee.$on('end', function () {
        alert('出奖了');
        $(btn).removeClass('disabled');
        btn.innerHTML = '开始抽奖';
    });
</script>
</body>
</html>